<template>
  <div>
    <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="add-conntent">
      <!-- 输入任意文本 -->
      <div class="box">
        <van-field v-model="addressInfo.name" label="姓名" placeholder="请输入姓名" />
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field v-model="addressInfo.tel" type="tel" label="手机号" placeholder="请输入手机号" />
        <!-- 省市选择 -->
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="地区"
          placeholder="请选择所在地区"
          @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
          <van-action-sheet v-model="show" title="请选择所在地区">
            <div class="content">
              <van-area
                :area-list="areaList"
                :options="areaList"
                @cancel="close"
                @confirm="confirm"
              />
            </div>
          </van-action-sheet>
        </van-popup>
        <van-field v-model="addressInfo.addressDetail" label="详细地址" placeholder="街道门牌、楼层房间号等信息" />

       
      </div>
       
    </div>
    <van-cell-group>
          <van-cell title="是否设置为默认地址"  ><van-switch v-model="addressInfo.isDefault" size="24px" /></van-cell>
          
        </van-cell-group>
       

<van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="large" round @click="submit"  >
  保存
</van-button>
  </div>
</template>

<script>
//引入城市信息
import { areaList } from "@vant/area-data";
// 引入收货地址路由
import {Addaddress} from '@api'
import {Toast} from 'vant'
export default {
  data() {
    return {
    
      
      areaList,
      show: false,
      fieldValue: "",
      cascaderValue: "",
     
     
     
      addressInfo:{
        name: "",
         addressDetail:'',
          isDefault:false,
          areaCode:'',
           city: [],
           tel: "",
           county:'',
           postalCode:'',
           province:'',
           country:''
      }
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },

    showup() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    confirm(val) {
      this.show = false;
      console.log(val);
      this.addressInfo.postalCode=val[0].code
      this.addressInfo.province=val[0].name
      this.addressInfo.areaCode=val[1].code
      this.addressInfo.city = val[1].name;
      this.addressInfo.country=val[2].code
      this.addressInfo.county = val[2].name;
      this.fieldValue = val.map((item) => item.name).join("/");
    },
    submit(){
      Addaddress(this.addressInfo).then(res=>{
        if(res.data.code===200){
          Toast.success("添加成功")
          setTimeout(()=>{
          this.$router.go(-1)
          },500)
          
        }else{
          Toast.fail("格式错误或信息重复")
        }
      })    }
  },
};
</script>

<style lang="scss" scoped>
.add-conntent {
  margin: 50px 15px 0 15px;
  border-radius: 15px;
  overflow: hidden;

  box-sizing: border-box;
  background: white;
  padding: 10px;
}
.van-field__body {
  background-color: #555;
}
.content {
  padding: 16px 16px 20px;
}
.van-cell__title{
  text-align: left;
 
  
}
.van-cell-group{
  padding: 10px 20px 0 0 ;
  margin: 20px 15px 0 15px;

   overflow: hidden;
    border-radius: 15px;
 
}
.van-button{
  width: 80%;
  margin-top: 40px;
}
</style>